import React, { useEffect, useState } from 'react'
import styles from '../css/Message.module.scss'

// 引入图标库
import { MyIcon } from '../MyIcon/MyIcon'
// 引入底部导航栏组件
import Footer from '../../../Footer'
import { useNavigate } from 'react-router-dom'
import axios from 'axios'
// import socketIO from 'socket.io-client'
// const socket = socketIO.connect('http://localhost:5000')

export default function Message() {
    const navigate = useNavigate()

    const [friend, setfriend] = useState([])
    useEffect(() => {
        friendList()
    }, [])
    const friendList = async () => {
        let { friendList } = JSON.parse(sessionStorage.user)
        let { data } = await axios.get('http://localhost:3000/friendList', {
            params: {
                friendList
            }
        })
        // console.log(data);
        setfriend(data.data)
    }

    return (
        <div>
            <h1 style={{ padding: '20px' }}>消息</h1>
            <div className={styles.message_box}>
                <div>
                    <div style={{ backgroundColor: '#FFB150', boxShadow: '0px 5px 15px #FFA848' }} className={styles.message_ele}>
                        <MyIcon onClick={() => { navigate('/app/talk/like') }} className={styles.message_icon} type='icon-aixin--kuai'></MyIcon>
                    </div>
                    <div style={{ textAlign: 'center', marginTop: '15px' }}>赞</div>
                </div>
                <div>
                    <div style={{ backgroundColor: '#669DFD', boxShadow: '0px 5px 15px #669DFD' }} className={styles.message_ele}>
                        <MyIcon onClick={() => { navigate('/app/talk/comment') }} style={{ fontSize: '10.1333vw' }} className={styles.message_icon} type='icon-pinglun'></MyIcon>
                    </div>
                    <div style={{ textAlign: 'center', marginTop: '15px' }}>评论</div>
                </div>
                <div>
                    <div style={{ backgroundColor: '#7CE18A', boxShadow: '0px 5px 15px #7CE18A' }} className={styles.message_ele}>
                        <MyIcon onClick={() => { navigate('/app/talk/fans') }} className={styles.message_icon} type='icon-fensi1'></MyIcon>
                    </div>
                    <div style={{ textAlign: 'center', marginTop: '15px' }}>粉丝</div>
                </div>
                <div>
                    <div style={{ backgroundColor: '#FF63FD', boxShadow: '0px 5px 15px #FF63FD' }} className={styles.message_ele}>
                        <MyIcon onClick={() => { navigate('/app/talk/notice') }} className={styles.message_icon} type='icon-tongzhi-copy'></MyIcon>
                    </div>
                    <div style={{ textAlign: 'center', marginTop: '15px' }}>通知</div>
                </div>
            </div>
            <div style={{ padding: '0px 20px' }} className={styles.message_list}>
                {
                    friend.map(item => (
                        <div key={item._id} onClick={() => { navigate('/app/talk/chat',{state:{item:item}}) }} className={styles.message_list_ele}>
                            <div className={styles.message_list_ele_left}>
                                <img className={styles.user_img} src={item.avatar} alt='' />
                            </div>
                            <div className={styles.message_list_ele_right}>
                                <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                                    <h3>{item.username}</h3>
                                    <div style={{ fontSize: '14px', color: '#999999' }}>3分钟前</div>
                                </div>
                                <div style={{ fontSize: '12px', color: '#999999' }}>你写的真不错，看出来花了不少心思</div>
                            </div>
                        </div>
                    ))
                }
            </div>
            {/* 底部导航组件 */}
            <Footer index={2}></Footer>
        </div>
    )
}
